<template>
  <div class="detail">
    <div class="image"><img :src="detail.coverUrl" /></div>
    <div class="names">
      <div class="icon2"></div>
      <div class="dename">{{ detail.name }}</div>
      <div class="radio">{{ radio.name }}</div>
      <button>订阅{{ radio.subCount }}</button>
    </div>
    <div class="dock">
      <button>
        播放
        {{
          Math.floor(detail.duration / 60000) +
          "分" +
          Math.floor((detail.duration % 60000) / 1000) +
          "秒"
        }}
      </button>
      <button>👍({{ detail.likedCount }})</button>
      <button>评论({{ detail.commentCount }})</button>
      <button>分享({{ detail.shareCount }})</button>
      <button>下载</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import axios from "@/request"
import $store from "@/store/index"

const detail = ref([])
const radio = ref([])
const id = ref("")

// 从vuex拿数据
id.value = $store.state.id
// console.log(id.value)
onMounted(() => {
  axios.get(`/dj/program/detail?id=${id.value}`).then((res) => {
    // console.log(res.data.program)
    detail.value = res.data.program
    radio.value = res.data.program.radio
  })
})
</script>

<style scoped>
.detail {
  display: flex;
  width: 600px;
  height: 300px;
}
.detail .image {
  display: inline-block;
  width: 160px;
  height: 220px;
}
.detail .image img {
  display: inline-block;
  width: 160px;
  height: 220px;
}
.names {
  display: inline-block;
  width: 440px;
  height: 220px;
}
.names .icon2 {
  display: inline-block;
  margin-top: 20px;
  margin-left: 10px;
  background: url(@/assets/icon2.png);
  width: 73px;
  height: 24px;
  background-position: 0 -75px;
}
.detail .dename {
  display: inline-block;
  margin-top: 20px;
  margin-left: 10px;
  width: 300px;
}
.names .radio {
  display: inline-block;
  margin-top: 40px;
  margin-left: 10px;
}
.names button {
  margin-left: 10px;
}

.dock {
  display: flex;
  height: 30px;
  margin-top: 240px;
  margin-left: -550px;
}
.dock button:nth-child(1) {
  background-color: aqua;
  border: 1px solid aqua;
}
.dock button:nth-child(2) {
  margin-left: 20px;
}
.dock button:nth-child(3) {
  margin-left: 20px;
}
.dock button:nth-child(4) {
  margin-left: 20px;
}
.dock button:nth-child(5) {
  margin-left: 20px;
}
</style>
